<!--登录权限判断在main.js-->
<template>
  <view class="login">
    <swiper vertical="true" style="height: 100vh;">
      <swiper-item>
        <scroll-view>
          <view class="login-tel">
            <view class="tel-main">
              <view class="logo">
                <image class="logo-img" src="../../static/logoall3.png" mode=""></image>
              </view>
              <view class="tel" @tap='gologintel'>手机号注册</view>
              <LoginOther></LoginOther>
              <view class="login-go">
                <view >已有账号,滑动至下页登录>>>
		
				</view>
                <image src="../../static/向下.jpg" mode=""></image>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
<!--图片-->
      <swiper-item>
        <scroll-view >
          <view class="login-tel">
            <view class="tel-main">
              <view class="login-go">
                <image src="../../static/向上.jpg" mode=""></image>
                <view>没有账号,滑动至上页注册>>></view>
              </view>
              <view></view>
                <view class="login-form">
					
                  <view class="login-user"> 
				  <text class="user-text" >账号:</text>
                  <input type="text" v-model="userName" value="" placeholder="请输入11位有效手机号">
				  </view>
                 
               <view class="login-user">
               
               		<text class="user-text">密码:</text>
               		<input :type="showPwd ? 'text' : 'password'" v-model="userPwd" value="" placeholder="请输入密码" class="no-border">
               		<view class="show-pwd" @tap="toggleShowPwd">{{ showPwd ? '隐藏密码' : '显示密码' }}</view>
               	
               	</view>

                
              </view>
	
			  
              <view class="login-quick">
                
              <!----><view ></view>
			   <view @click="goto('/pages/forgetcode/forgetcode')">忘记密码</view>
              </view>
              <view class="tel" @tap='submit'>登录</view>
              <!--<view class="reminder">温馨提示</view>-->
			  <LoginOther></LoginOther><!--引入comnents的otherlogin组件-->
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
	 import {mapMutations} from 'vuex';
	import $http from '@/common/api/request.js'//引入request组件
	import LoginOther from'@/components/login/login-ohter.vue'//插入封装的组件（components>login>login-other.vue)
	import Tabbar from '../../components/common/Tabbar.vue'
import {mapState} from 'vuex';


	export default {
	 data() { 
	 	return{
			//用户输入的内容
			
			userName1:'1',
		
			user:[],
			userId:'',
			type:"login",
			userPwd:"",
			showPwd: false, // 控制密码显示或隐藏
			//验证的规则
			rules:{
				userName:{
					rule:/^1[3456789]\d{9}$/,
					msg:"请填写11位有效手机账号"
				},
				userPwd:{
					rule:/^[0-9a-zA-z]{6,16}$/,
					msg:"密码应该为6-16位字符"
				}
			},
			
		}
	 },

	 components:{
		 LoginOther//封装方法
	 },

 computed:{
 		  ...mapMutations({
 			  loginStatus:state=>state.user.loginStatus,
 			  userInfo:state=>state.user.userInfo
 		  })
 	  },
	  mounted() {
	  	this.submit();
	  },
    methods: {
		  ...mapState(['loginIng']),
		 
      back() {//回退
        uni.navigateBack({ 
          delta: 1
        }) 
    },
	  
	save() {
		  // 保存用户信息逻辑
		},
		submit() {
		  if (!this.validate('userName')) return;
		  if (!this.validate('userPwd')) return;
		  if (!this.validate('userName')) return;
		
		  let requestData = {
		    phone: this.userName,
		    password: this.userPwd,
		    type: this.type
		  };
		
		  uni.request({
		    url: 'http://43.136.172.73/api/v1/auth/login',
		    method: 'POST',
		    data: requestData,
		    header: {
		      'Authorization': 'sfsdf',
		    },
		    success: (res) => {
		      console.log(res.data); // 打印接收到的后端返回的信息
		
		      if (res.data.code === 2005) {
		        uni.showToast({
		          title: '密码错误',
		          icon: 'none'
		        });
		      } 
			  
			  if (res.data.code === 2001) {
			    uni.showToast({
			      title: '用户不存在',
			      icon: 'none'
			    });
			  } else {
				  
		        this.user = res.data.map.user;
		        this.userId = res.data.map.user.id;
		        console.log('打印用户', this.user);
		        uni.showToast({
		          title: '登录成功',
		          icon: 'none',
		          duration: 1000
		        });
		
		        uni.setStorageSync('userId', this.userId);
		        uni.setStorageSync('user', this.user);
			
		
		        setTimeout(() => {
		          uni.navigateTo({
		            url: '../index/index?userId=' + this.userId
		          });
		        }, 1000);
		      }
		    },
		    fail: (err) => {
		      uni.showToast({
		        title: '登录失败',
		        icon: 'none'
		      });
		    }
		  });
		},

	//点击登录,和后端连上了要把login删掉，把submit打开 
	// submit(){	
	// 	if( !this.validate('userName')) return;
	// 	if( !this.validate('userPwd')) return;
	// 	uni.showLoading({
	// 		title:"登录中......",
			
	// 	}),
	// 	this.loginIng();
	// 	uni.reLaunch({
	// 	 			  url:"../index/index"
	// 	})  ,

		/*uni.request({
			url:"/auth/login",
			//url:"/commodity/list",
			method:"",
			data:{
				phone:this.userName,//给后端的东西，冒号前面要和后端的保持一致
				password:this.userPwd
			}
		}).then((res)=>{
			console.log(res)
			//保存用户信息
			this.login(res.data);//后端传给我的data，一个值
			uni.showToast({
				title:res.msg,
				icon:"none"
			})
				uni.hideLoading();
				uni.navigateBack({
				delta:1
				})
		}).catch(()=>{
			uni.showToast({
				title:'请求失败',
				icon:'none'
			})
		})	*/
	
	validate(key){
		let bool=true;
		if(  !this.rules[key].rule.test(this[key])){
			uni.showToast({
				title:this.rules[key].msg,
				icon:"none"
			})
			bool=false;
			return false;
		}
		return bool;
	},
	toggleShowPwd() { // 切换密码显示或隐藏
	  this.showPwd = !this.showPwd;
	},  
	 goto(url) {
        uni.navigateTo({
          url: url
        })
      },
	gologintel(){
		uni.navigateTo({
			url:"../login-tel/login-tel"
		})
	}

	
	
  },
  }
</script>
<style scoped>

.login-tel  {
	padding: 30rpx;
	width: 100vw;
	height: 100vh;
}
.tel-main{
	padding: 0,20rpx;
}

.logo{
	padding-top: 70rpx;
	padding-bottom: 120rpx;
	display: flex;
	justify-content: center;
}
.tel{

	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	color:#FFFF ;
	background-color: #49BDFB;
	border-radius: 40rpx;
}


	.login-go{
		color: darkgray;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.login-go image{
		width:90rpx ;
		height: 90rpx;
	}
	
	.login-form{
		
		padding-top: 50rpx;

		
	}
	.login-user{
		position: relative;
		display: flex;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;
		text-align: left;
		color:black;
		background-color: #f7f7f7;
		border-radius: 40rpx;
		margin: 40rpx 0rpx;
	
		border-bottom: 2rpx solid #f7f7f7;
	}
	
	.user-text{
	  margin-left: 20rpx;
	  padding-right: 10rpx;
	  font-size: 33rpx;
	  text-align: center;
	  align-items: center;
	  color: black;
	  font-weight: 400;
	}
	
	.show-pwd {
	position: absolute;
	right: 50rpx;
	  color: #49BDFB;
	  padding-top: 10rpx;
	  padding-bottom: 10rpx;
	
	  cursor: pointer;
	
	}
	
	.no-border {
	  outline: none;
	    border:none ;
	  background-color: #f7f7f7;
	  display: flex;
	  align-items: center;
	  height: 50rpx;
	  line-height: 50rpx;
	  font-size: 28rpx; 
	}
	.login-quick{
		display: flex;
		justify-content: end;
		padding: 10rpx 0;
		padding-bottom: 50rpx;
	}
	
	.reminder{
		color: darkgray;
		padding-top: 30rpx;
		text-align: center;
	}
	
	//按钮
		.btn {
		margin-left: -20rpx;
		margin-right:-20rpx;
		padding: 50rpx;
		
		  }
		
		//版心
		.container {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  flex-direction: column;
		  height: 100vh;
		}//按钮

		
</style>




